<script lang="ts" setup>
import { reactive } from 'vue'
import axios from 'axios';

// do not use same name with ref
const form = reactive({
  itemName: '',
  itemUrllist: [],
  itemAmount: '',
  itemOvertime: '',
  itemStatus: '1',
  itemCategroy: '',
  itemUse: '',
  itemPosition: '',
  positionUrllist: [],
  upUrllist: [],
  upPourllist: [],
  remark: '',
})
// // do not use same name with ref
// const form = reactive({
//   name: '',
//   region1: '',
//   region2: '',
//   date1: '',
//   delivery: false,
//   type: [],
//   resource: '',
//   amount: '',
//   desc: '',
//   url: 'http://192.168.31.232:8092/getimage/aaaaa.jpeg',
//   upfileList: [
//   {
//     name: 'aaaaa.jpeg',
//     url: 'http://192.168.31.232:8092/getimage/aaaaa.jpeg',
//   }
//   ],
//   picList: [
//     'http://192.168.31.232:8092/getimage/aaaaa.jpeg'
//   ]
// })

const onSubmit = async () => {
  console.log('submit!')
  let reqjson = JSON.stringify(form)
  try {
    const response = await axios.post('http://192.168.31.232:8899/addItems', reqjson,{
      headers: {
        'Content-Type': 'application/json'
      }
    });
    if (response.data.success) {
      alert('表单提交成功！');
    } else {
      alert('表单提交失败：' + response.data.message + '收到返回标志' + response.data.success);
    }
  } catch (error) {
    console.error(error);
    alert('网络错误，请稍后再试！');
  }



}

import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'

import type { UploadProps, UploadUserFile } from 'element-plus'

const fileList = ref<UploadUserFile[]>([
  {
    name: 'aaaaa.jpeg',
    url: 'http://192.168.31.232:8092/getimage/aaaaa.jpeg',
  }
])

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleSuccess: UploadProps['onSuccess'] = (
  response,
  uploadFile
) => {
  console.log('Success-start')
  dialogImageUrl.value = URL.createObjectURL(uploadFile.raw!)
  // console.log(response['filename'])
  // console.log(uploadFile.raw!)
  console.log(form.itemUrllist)

  let success_uploadfile = {
    name: response['filename'],
    url: 'http://192.168.31.232:8899/api/files/' + response['filename']
  }

  form.itemUrllist.push(success_uploadfile['url'])
  // console.log(form.upfileList)
//  form.upfileList.push(success_uploadfile)

  // console.log(form.upfileList)

  console.log('Success-end')

}


const handleSuccess_po: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  console.log('Success-start')
  dialogImageUrl.value = URL.createObjectURL(uploadFile.raw!)
  // console.log(response['filename'])
  // console.log(uploadFile.raw!)
  console.log(form.itemUrllist)

  let success_uploadfile = {
    name: response['filename'],
    url: 'http://192.168.31.232:8899/api/files/' + response['filename']
  }

  form.positionUrllist.push(success_uploadfile['url'])


  console.log('Success-end')

}

const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
  console.log('Remove')
  console.log(form)
}

const handlePictureCardPreview: UploadProps['onPreview'] = (uploadFile) => {
  console.log('Preview')
  dialogImageUrl.value = uploadFile.url!
  dialogVisible.value = true
  console.log(form)
}

</script>

<template>

  <el-form :model="form" label-width="auto" style="max-width: 600px"  >
    <el-form-item lable="上传物品图片">
        <el-upload
          v-model:file-list="form.upUrllist"
          action="http://192.168.31.232:8899/api/files/upload"
          list-type="picture-card"
          :on-success="handleSuccess"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
        >
          <el-icon><Plus /></el-icon>
        </el-upload>

        <el-dialog v-model="dialogVisible">
          <img w-full :src="dialogImageUrl" alt="Preview Image" />
        </el-dialog>
    </el-form-item>

    <el-form-item label="物品照片">
      <el-image
          style="width: 100px; height: 100px"
          :src="form.itemUrllist[0]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="form.itemUrllist"
          :initial-index="4"
          fit="cover"
      />
    </el-form-item>


    <el-form-item label="物品名称">
      <el-input v-model="form.itemName" />
    </el-form-item>
    <el-form-item label="物品数量">
      <el-input v-model="form.itemAmount" />
    </el-form-item>
    <el-form-item label="过期时间">
      <el-col :span="11">
        <el-date-picker
            v-model="form.itemOvertime"
            type="date"
            placeholder="Pick a date"
            style="width: 100%"
        />
      </el-col>
    </el-form-item>

    <el-form-item label="物品分类">
      <el-input v-model="form.itemCategroy" />
    </el-form-item>
    <el-form-item label="物品用途">
      <el-input v-model="form.itemUse" type="textarea" />
    </el-form-item>
    <el-form-item lable="上传位置图片">
      <el-upload
          v-model:file-list="form.upPourllist"
          action="http://192.168.31.232:8899/api/files/upload"
          list-type="picture-card"
          :on-success="handleSuccess_po"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
      >
        <el-icon><Plus /></el-icon>
      </el-upload>

      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" alt="Preview Image" />
      </el-dialog>
    </el-form-item>
    <el-form-item label="物品位置照片">
      <el-image
          style="width: 100px; height: 100px"
          :src="form.positionUrllist[0]"
          :zoom-rate="1.2"
          :max-scale="7"
          :min-scale="0.2"
          :preview-src-list="form.positionUrllist"
          :initial-index="4"
          fit="cover"
      />
    </el-form-item>
    <el-form-item label="物品位置">
      <el-input v-model="form.itemPosition" type="textarea"/>
    </el-form-item>

    <el-form-item label="备注">
      <el-input v-model="form.remark" type="textarea" />
    </el-form-item>

    <el-form-item>
      <el-button type="primary" @click="onSubmit">Create</el-button>
      <el-button>Cancel</el-button>
    </el-form-item>


  </el-form>
</template>

<style>

</style>


